<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2023-03-03 22:20:18
-->
<template>
    <div class="singerres">
        <div v-if="info.artists.length !== 0">
            <div class="count">
                <span>找到{{ info.artistsCount }}位歌手</span>
            </div>
            <div class="list">
                <div class="item" v-for="(item, index) in info.artists" :key="item.id">
                    <Singerlist :singerlist="item"></Singerlist>
                </div>
            </div>
        </div>
        <div class="no" v-else>
            <el-empty description="数据正在加载~" :image-size="200"></el-empty>
        </div>

    </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { reactive, onMounted } from 'vue'
import { getSearchSinger } from '@/api/searchdetail/searchdetail.js'
import Singerlist from '@/components/content/singerlist/Singerlist.vue'
const route = useRoute()
const info = reactive({
    keyword: '',
    artists: [],
    artistsCount: 0,
    currentPage: 1,
})


//搜索歌手
async function getSearchSingerBy(page = 1) {
    let offset = (page - 1) * 30
    let res = await getSearchSinger(info.keyword, offset)
    if (res.data.code == 200) {
        info.artists = res.data.result.artists
        info.artistsCount = res.data.result.artistCount
    }
}

onMounted(() => {
    info.keyword = route.params.keywords
    getSearchSingerBy()
})

</script>

<style lang="scss" scoped>
.singerres {
    position: relative;
    .count {
        position: absolute;
        top: -30px;
        right: 50px;
        color: #c0bebe;
        font-size: 13px;
    }

    .list {
        display: flex;

        .item {
            margin-right: 20px;
            margin-bottom: 20px;
        }
    }

    .no {
        width: 100%;
        text-align: center;
        font-size: 24px;
        font-weight: 700;
    }
}
</style>